<template>
  <div class="variableTable" @mouseup.left="cancleSelect">
    <el-table
      v-contextmenu:variablemenu
      :data="variables"
      height="100%"
      :default-sort="{ prop: 'Name', order: 'descending' }"
      :row-class-name="tableRowClassName"
      @row-contextmenu="rightClick"
      @row-click="leftClick"
    >
      <!-- <el-table
      :data="variables"
      height="100%"
      :default-sort="{ prop: 'Name', order: 'descending' }"
      :row-class-name="tableRowClassName"
      @row-contextmenu="rightClick"
      v-contextmenu:variablemenu
      @row-click="leftClick"
      @cell-dblclick="tabClick"
    > -->
      <el-table-column
        prop="Name"
        label="Name"
        sortable
        width="90"
      />
      <el-table-column label="Value">
        <template slot-scope="scope">
          <div v-if="!scope.row.tooLong">
            <!-- <span v-if="scope.row.index === tabClickIndex && tabClickLabel === 'Value'">
              <el-input
                v-model="scope.row.Value"
                maxlength="100"
                v-focus
                size="medium"
                @blur="inputBlur(scope.row)"
              />
            </span>
            <span v-else>{{ scope.row.Value }}</span> -->
            <span>{{ scope.row.Value }}</span>
          </div>
          <div v-else class="ellipsisDisplay" @dblclick="openVariable(scope.row)">
            {{ scope.row.ellipsis }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <v-contextmenu ref="variablemenu">
      <right-menu
        :menu-list="menuVariableList"
        :callback="menuClick"
      />
    </v-contextmenu>
  </div>
</template>

<script>
import RightMenu from '@/components/menu/RightMenu.vue';
import { plot } from '@/utils/plot.js';
export default {
  name: 'VariableExplorer',
  components: {
    RightMenu
  },
  props: {
    variables: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: this.visible,
      tabClickIndex: null,
      tabClickLabel: ''
    };
  },
  computed: {
    // 根据选择的变量数量获得右键菜单
    menuVariableList() {
      const selectedVars = this.$store.state.matlab.selectedVars;
      // 判断选择的数量
      if (selectedVars.length === 0) return [];
      let res = [
        {
          style: 'item',
          type: 'openVariable',
          title: '打开'
        },
        {
          style: 'item',
          type: 'deleteVariable',
          title: '删除'
        },
        {
          style: 'divider'
        }
      ];
      let variableName = '';
      selectedVars.forEach((variable, index) => {
        if (index !== 0) {
          variableName += ',';
        }
        variableName += variable.Name;
      });
      variableName = '(' + variableName + ')';
      switch (selectedVars.length) {
        case 1:
          res = res.concat([
            // {
            //   style: 'item',
            //   type: 'plot',
            //   title: 'plot' + variableName
            // },
            // {
            //   style: 'item',
            //   type: 'area',
            //   title: 'area' + variableName
            // },
            // {
            //   style: 'item',
            //   type: 'bar',
            //   title: 'bar' + variableName
            // },
            {
              style: 'item',
              type: 'pie',
              title: 'pie' + variableName
            },
            {
              style: 'item',
              type: 'histogram',
              title: 'histogram' + variableName
            }
          ]);
          break;
        case 2:
          res = res.concat([
            {
              style: 'item',
              type: 'plot',
              title: 'plot' + variableName
            },
            {
              style: 'item',
              type: 'area',
              title: 'area' + variableName
            },
            {
              style: 'item',
              type: 'bar',
              title: 'bar' + variableName
            },
            {
              style: 'item',
              type: 'pie',
              title: 'pie' + variableName
            },
            // {
            //   style: 'item',
            //   type: 'histogram',
            //   title: 'histogram' + variableName
            // },
            {
              style: 'item',
              type: 'scatter',
              title: 'scatter' + variableName
            }
          ]);
          break;
        case 3:
          res = res.concat([
            {
              style: 'item',
              type: 'plot3d',
              title: 'plot3d' + variableName
            },
            {
              style: 'item',
              type: 'scatter',
              title: 'scatter3d' + variableName
            }
          ]);
          break;
      }
      res = res.concat([
        {
          style: 'divider'
        },
        {
          style: 'item',
          type: 'drawList',
          title: '绘图目录'
        }
      ]);
      // todo 绘制多个序列的图 绘图目录
      return res;
    }
  },
  methods: {
    // 点击
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case 'Value':
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        default: return;
      }
    },
    // 失焦
    inputBlur(row) {
      this.tabClickIndex = null;
      this.tabClickLabel = '';
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
      const selectedVars = this.$store.state.matlab.selectedVars;
      let res = '';
      selectedVars.forEach((value) => {
        if (row.Name === value.Name) {
          res = 'selectedRow';
        }
      });
      return res;
    },
    openVariable(row) {
      const payload = {
        value: { data: row.value, show: row.show },
        id: row.id,
        label: row.Name
      };
      this.$store.dispatch('matlab/openVariable', payload);
    },
    deleteVariable(row) {
      const payload = {
        id: row.id,
        label: row.Name
      };
      this.$store.dispatch('matlab/deleteVariable', payload);
    },
    // 左键选择变量
    leftClick(row, column, event) {
      if (window.event.ctrlKey) {
        let contains = false;
        var selectedVars = this.$store.state.matlab.selectedVars;
        selectedVars = selectedVars.filter((value) => {
          if (value.Name === row.Name) {
            contains = true;
            return false;
          }
          return true;
        });
        if (!contains) selectedVars.push(row);
        this.$store.commit('matlab/setSelectedVars', selectedVars);
      } else this.$store.commit('matlab/setSelectedVars', [row]);
    },
    // 右键打开菜单
    rightClick(row, column, event) {
      event.preventDefault();
      // 右键也选择
      let contains = false;
      var selectedVars = this.$store.state.matlab.selectedVars;
      selectedVars.forEach((value) => {
        if (value.Name === row.Name) {
          contains = true;
        }
      });
      if (!contains) this.$store.commit('matlab/setSelectedVars', [row]);
      // const x = parseInt(event.clientX);
      // const y = parseInt(event.clientY);
      // const postition = {
      //   top: y,
      //   left: x
      // };
      // this.$refs.variablemenu.show(postition);
    },
    // 关闭菜单
    cancleSelect() {
      if (!window.event.ctrlKey) {
        this.$store.commit('matlab/setSelectedVars', []);
      }
    },
    menuClick(type) {
      this.clickFunctions(type, this.menuData);
    },
    clickFunctions(type) {
      var selectedVars = this.$store.state.matlab.selectedVars;
      switch (type) {
        case 'openVariable':
          selectedVars.forEach((value) => {
            this.openVariable(value);
          });
          break;
        case 'deleteVariable':
          selectedVars.forEach((value) => {
            this.deleteVariable(value);
          });
          break;
        case 'drawList':
          this.$store.commit('matlab/showDrawList', { isShow: true });
          break;
        default:
          plot(this.$store, type);
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.variableTable {
  height: 100%;
  .el-table .cell {
    white-space: pre-line;
    word-break: break-word;
  }
  .ellipsisDisplay {
    cursor: pointer;
    color: #0033ff;
    font-style: italic;
  }
  .el-table .selectedRow {
    background: rgb(230, 230, 230);
  }
  .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .el-table__body-wrapper {
    border-right: none;
    overflow-y: scroll;
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color:dimgray;
    border-radius: 3px;
  }
  // .el-input__inner{
  //   border: 0;
  // }
}
</style>
